<template>
  <view class="category">
    <!-- 搜索框 -->
	<UgoSearch></UgoSearch>
  <!-- 内容 -->
  <view class="main">
    <!-- 左侧菜单 -->
    <view class="menus">
      <view class="item" :class="current===index ? 'active' : ''" @click="changeCurrent(index)" v-for="(item,index) in menus" :key="item">
        {{item}}
      </view>
    </view>
    <!-- 右侧内容 -->
    <view class="content">
      <view class="group" v-for="item1 in contents" :key="item1.cat_id">
        <!-- 菜单分类 -->
        <view class="group-title">{{item1.cat_name}}</view>
        <view class="group-content">
          <navigator :url="`/pages/goods_list/goods_list?cid=${item2.cat_id}`" v-for="item2 in item1.children" :key="item2.cat_id">
          <!-- 商品图片 -->
          <u-image :src="item2.cat_icon" width="120" height="120"></u-image>
          <!-- 商品标题 -->
          <view>{{item2.cat_name}}</view>
         </navigator>
        </view>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
export default {
  // 在data中定义的数据  最好都是在模版 上 直接使用
  // 否则 这个数据 没有必要定在data data中数据越多 越卡
  // https://developers.weixin.qq.com/miniprogram/dev/framework/audits/best-practice.html
  data(){
    return{
      // 左侧菜单数据
      menus:[],
      // 右侧对应内容
      contents:[],
      // 当前点击的类  -- 对应下标
      current:0,
      // 获取到商品的全部数据  数据太多 不需要放在data里面 用 this.categories 
      // contents:[]
    }
  },
  async onLoad(){
    const result = await this.$u.get('/categories')
    this.categories = result.message
    // 过滤掉 /处理好的左侧菜单的数据
    this.menus = this.categories.map((v)=> v.cat_name)
    // // 过滤掉 /处理好的右侧内容的数据
    this.contents = this.categories[0].children
  },
  methods:{
    // 点击左侧菜单栏事件
    changeCurrent(index){
      // console.log(index);
      // 切换选中的标题
      this.current = index
      // 切换右侧选中的内容
      this.contents = this.categories[index].children
    }
  }
}
</script>

<style lang="scss">
.category{
  .main{
    height: calc(100vh - 84rpx);
    display: flex;
    .menus{
      overflow: auto;
      width: 182rpx;
      .item{
        height: 70rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .active{
        color: #eb4450;
      }
    }
    .content{
      flex: 1;
      // 出现滚动条
      overflow: auto;
      .group-title{
        height: 70rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        // 伪元素 旁边的/ /
        &::before{
          content: '/';
          margin-right: 10rpx;
        }
        &::after{
          content: '/';
          margin-left: 10rpx;
        }
      }
      .group-content{
        display: flex;
        // 换行
        flex-wrap: wrap;
        padding: 0 48rpx;
        // justify-content: space-between;
        navigator {
          width: 120rpx;
          margin-right: 56rpx;
        };
        // 每行第三个图片不用加margin-right   被3整除 3倍数
        navigator:nth-child(3n){
          margin-right: 0rpx;
        }

      }
    }
  }
}
</style>